<template>

	<scroll-view scroll-y="true" class="recommend_view" @scrolltolower="showcase" v-if="monthList.DD">
		<view class="recommend_wrap">
			<!-- 推荐图片列表 -->
			<view class="recommend_img">
				<view class="recommend_show" v-for="(item,index) in recomList" :key="item.id" @click="recominfo(index)">
					<image :src="item.thumb" mode="widthFix"></image>
				</view>
			</view>
			<!-- 推荐图片列表 -->
			<!-- 月份列表 -->
			<view class="month_wrap">
				<view class="month_info">
					<text>{{monthList.MM}}</text> &nbsp; &nbsp; &nbsp; 
					/{{monthList.DD}}月
					<text class="beaity">{{monthList.title}}</text>
				</view>
				<view class="month_more">更多》</view>
			</view>
			<view class="month_list">
				<view class="month_image" v-for="(item,index) in monList" :key="item.id">
					<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 月份列表 -->
		</view>
		<view class="hot_wrap">
			<view class="hot_title">
				热门
				<text></text>
			</view>
			<view class="image_wrap">
				<view class="hot_image" v-for="(item,index) in hotList" :key="index">
					<image :src="item.thumb" mode="aspectFill" @click="prviewimage(index)"></image>
				</view>
			</view>
		</view>
	</scroll-view>
	
</template>

<script>
	import request from '../../../JS/request.js'
	import moment from 'moment'
	export default {
		data() {
			return {
				recomList: [],
				monthList: {},
				hotList: [],
				monList: [],
				params:{
					//获取几条
					limit: 30,
					//关键字
					order: "hot",
					//跳过多少条数据
					skip: 0
				},
				//是否还可以请求 当请求的数组长度为0时改为false
				current:true
				
			}
		},
		methods: {
			//监听滚动到底部
			showcase() {
				
				//skip每次刷新都要+=limt;
				if(this.current){
					this.params.skip+=this.params.limit;
					this.getList()
				}else{
					wx.showToast({
						title:"没有新数据了",
						icon:none
					})
				}
				},
				//跳转到专辑详情页面
			recominfo(index){
				let id = this.recomList[index].target
				console.log(id)
				wx.navigateTo({
					url:`../album/index?id=${id}`
				})
				
			},
				
			
			//获取数据
			getList() {
				request({

						data:this.params,
						url: 'http://service.picasso.adesk.com/v3/homepage/vertical'
					})
					.then(res => {
						let data = res.data.res //把data获取出来
							if(data.vertical.length ===0){
								return;
								this.current = false
							}
							//推荐图片列表
							if(this.recomList.length == 0){
								this.recomList = data.homepage[1].items
								//推荐月份数据
								this.monthList = data.homepage[2]
								//列表图片获取
								this.monList = data.homepage[2].items
								//天数，月数
								this.monthList.MM = moment().format("MM");
								this.monthList.DD = moment().format("DD");
							}
							
					
					//每次重新获取的数据必须加上前面已经有的数据，然后不会丢失
						this.hotList = [...this.hotList,...data.vertical]
						console.log(this.recomList)
					})
			},
			//图片预览
			prviewimage(index){
				let imageList = this.hotList.map((item,index,arr)=>item.thumb);
				wx.previewImage({
					current:this.hotList[index].thumb,
					urls:imageList
				})
			}
		},
		mounted() {
				this.getList()
		}
	}
</script>

<style lang="scss">
	.recommend_view {
		height: calc(100vh - 36px);
	}

	.recommend_wrap {
		.recommend_img {
			display: flex;
			flex-wrap: wrap;

			.recommend_show {
				width: 50%;
				border: 5rpx solid #fff;

				image {
					border-radius: 5rpx;
				}
			}
		}
	}

	.month_wrap {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 5rpx;

		.month_info {
			overflow: hidden;
			font-size: 25rpx;
			letter-spacing: 2rpx;

			text {
				font-size: 35rpx;
				color: $uni-color-error;

			}

			.beaity {
				display: inline-block;
				text-indent: 1em;
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.month_more {
			font-size: 25rpx;
			color: $uni-color-error;
			font-weight: bold;
		}
	}

	.month_list {
		display: flex;
		flex-wrap: wrap;

		.month_image {
			width: 33.33%;
			border: 5rpx solid #FFFFFF;
		}
	}

	.hot_wrap {
		.hot_title {
			position: relative;
			height: 70rpx;
			line-height: 70rpx;
			color: $uni-color-error;
			text-indent: 1em;
			letter-spacing: 2rpx;
			font-weight: bold;

			text {
				display: block;
				position: absolute;
				background-color: $uni-color-error;
				width: 10rpx;
				height: 80%;
				left: 0;
				top: 50%;
				transform: translateY(-50%);

			}
		}

		.image_wrap {
			display: flex;
			flex-wrap: wrap;

			.hot_image {
				height: 360rpx;
				width: 33.33%;
				border: 5rpx solid #FFFFFF;
			}
		}
	}
</style>
